<template>
  <div class="container">
    <!-- 返回导航 -->
    <div>
      <div>
        <span @click="$router.back(-1)" class="back">
          {{ $t("page.back") }}{{ $t("page.list") }}
        </span>
        > {{ $route.query.name }}（{{ $route.query.time }}）
      </div>
    </div>

    <div class="container-body" v-loading="loading">
      <template>
        <div class="title-space">
          <span>{{ $t("page.ODvalue") }}：</span>
        </div>

        <div class="overflow">
          <table
            id="table-1"
            width="100%"
            :key="listIndex"
            v-for="(listItem, listIndex) in originalData"
          >
            <tr
              v-for="(table, key, index) in setListItem(listItem)"
              :key="index"
            >
              <td class="color-000">
                {{ key !== "time" ? key : $t("page.label") }}
              </td>
              <td>
                <span v-if="key !== 'time'">
                  {{ beforeLable[index - 1] }}
                </span>
                <span class="color-000" v-else>
                  {{ $t("page.mark") }}
                </span>
              </td>
              <td v-for="(iTable, i) in table" :key="i">
                <span v-if="key !== 'time'">{{ iTable }}</span>
                <span class="color-000" v-else>{{ iTable + "s" }}</span>
              </td>
            </tr>
          </table>
        </div>

        <div class="space text-center">
          <linePointDiagram
            v-show="graphicalList.includes(1)"
            style="margin-top: 40px"
            :value="resultFormatValue"
            :markLine="sprone_dissociation"
            :title="$t('page.originalFigure')"
          ></linePointDiagram>

          <linePointDiagram
            v-show="graphicalList.includes(2)"
            style="margin-top: 40px"
            :value="reductionWater"
            :markLine="sprone_dissociation"
            :title="$t('page.ZeroFigure')"
          ></linePointDiagram>

          <FittedCurve
            v-show="graphicalList.includes(3)"
            style="margin-top: 40px"
            :originalData1="subtract"
            :originalData2="fittedingList"
            :originalData3="optimizeList"
            :resultValue="resultValue"
            :dissociation="dissociation"
            :title="$t('page.dissociationData')"
          ></FittedCurve>
        </div>

        <div class="botton_result">
          <div class="title-space">
            <span>{{ $t("page.molecular") }}（Da）：</span>
            {{ mole }}
          </div>
          <table id="table-1">
            <template v-for="(resValue, resIndex) in paramResult">
              <tr>
                <td v-for="(v, k, i) in resValue" :key="i">
                  <span class="k">K</span>{{ k.slice(1, 2) }}
                </td>
              </tr>
              <tr>
                <td v-for="(v, k, i) in resValue" :key="i">{{ v }}</td>
              </tr>
            </template>
          </table>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
// import waveChart from '@/components/WaveChart'
import { fetchHistoryDetail } from "@/api/table";
import Saccharose from "../WeSprTest/saccharose.vue";
import FittedCurve from "../WeSprTest/fittedCurve.vue";
import linePointDiagram from '@/commonPage/linePointDiagram'
import { formatData } from '@/commonPage/linePointDiagram/formatData'
export default {
  data() {
    return {
      graphicalList: ["1", "2", "3"],
      loading: true,
      exlName: "",
      waveName: [],
      resultValue: {},
      unit: "",
      beforeLable: [],
      originalData: [],
      reductionWater: {},
      subtract: [],
      dissociation: [],
      paramResult: [], // 分子量表格
      fittedingList: [], // 结合第二组数据
      mole: "",
      sprone_dissociation: [],
      optimizeList: [],
      resultFormatValue: {}
    };
  },
  components: {
    linePointDiagram,
    Saccharose,
    FittedCurve,
  },
  mounted() {
    this.getHistoryDetail();
  },
  methods: {
    // 将循环对象排序
    setListItem(data) {
      const obj = {};
      const obj1 = {};
      for (const k in data) {
        if ("time" === k) {
          obj[k] = data[k];
        } else {
          obj1[k] = data[k];
        }
      }
      return { ...obj, ...obj1 };
    },
    async getHistoryDetail() {
      const res = await fetchHistoryDetail({
        id: this.$route.query.id,
      });
      this.loading = false;
      // this.mole = res.data[0].mole
      const data = JSON.parse(res.data[0].resultData);
      // console.log(data, '信息');
      // 分子量
      this.mole = data.mole;
      this.beforeLable = data.resultValue["data1"];
      this.unit = data.unit;
      this.originalData = data.originalDataList_original;
      // 原始图
      this.resultFormatValue = {
        ...formatData(data.originalDataList_original[0]),
      }
      // this.waveName = data.hole;
      // this.resultValue = data.resultValue;
      // 归零图
      this.reductionWater = {
        ...formatData(data.originalDataList_zero[0]),
      }
      // 结合解离
      this.subtract = data.originalData_hl_merge;
      this.fittedingList = data.originalData_hl_merge_fitting;
      this.optimizeList = data.originalData_hl_merge_fitting_optimize;
      // 分界线
      this.dissociation = data.dissociation;
      this.sprone_dissociation = data.sprone_dissociation;
      // 分子量表格数据
      this.paramResult = data.paramResult;
      // 展示哪些图形
      this.graphicalList = data.imageSwitcher || data.ImageSwitcher;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.back {
  color: #028cdf;
  cursor: pointer;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 20px;
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}
.botton_result {
  width: 100%;
  .title-space {
    font-size: 18px;
    font-weight: 700;
    span {
      font-size: 18px;
      font-weight: 700;
    }
  }
  #table-1 {
    width: 100%;
    td {
      width: 30%;
    }
  }
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
</style>
